<template>
  <view class="review-list-container">
    <!-- 筛选标签 -->
    <view class="filter-tabs">
      <u-tabs
        :list="filterList"
        :current="currentFilterIndex"
        @change="handleFilterChange"
        lineColor="#ff5500"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }"
      ></u-tabs>
    </view>

    <!-- 评价列表 -->
    <view class="review-list">
      <view 
        class="review-item" 
        v-for="(review, index) in reviewList" 
        :key="index"
      >
        <view class="user-info">
          <image :src="review.userAvatar" mode="aspectFill" class="user-avatar"></image>
          <view class="user-details">
            <text class="user-name">{{ review.userName }}</text>
            <u-rate
              :value="review.rating"
              readonly
              activeColor="#ff5500"
              size="24"
            ></u-rate>
          </view>
          <text class="review-time">{{ review.createTime }}</text>
        </view>
        <text class="review-content">{{ review.content }}</text>
        <view class="review-images" v-if="review.images && review.images.length > 0">
          <image 
            v-for="(img, imgIndex) in review.images"
            :key="imgIndex"
            :src="img"
            mode="aspectFill"
            class="review-image"
            @click="previewImage(review.images, imgIndex)"
          ></image>
        </view>
        <text class="review-specs">规格: {{ review.specs }}</text>
        <!-- 可以添加追评、商家回复等 -->
      </view>

      <!-- 加载更多 -->
      <u-loadmore
        :status="loadMoreStatus"
        @loadmore="loadMore"
        :loading-text="loadingText"
        :loadmore-text="loadmoreText"
        :nomore-text="nomoreText"
      ></u-loadmore>
    </view>

    <!-- 空状态 -->
    <u-empty
      v-if="reviewList.length === 0 && loadMoreStatus !== 'loading'"
      mode="message"
      icon="http://cdn.uviewui.com/uview/empty/message.png"
      text="暂无评价"
    ></u-empty>

  </view>
</template>

<script>
export default {
  data() {
    return {
      productId: '',
      filterList: [
        { name: '全部', value: 'all' },
        { name: '好评', value: 'positive' },
        { name: '中评', value: 'neutral' },
        { name: '差评', value: 'negative' },
        { name: '有图', value: 'has_image' }
      ],
      currentFilterIndex: 0,
      tagFilter: '', // Tag filter from index page
      reviewList: [],
      page: 1,
      limit: 10,
      hasMore: true,
      loadMoreStatus: 'loadmore', // loadmore, loading, nomore
      loadingText: '努力加载中',
      loadmoreText: '轻轻上拉',
      nomoreText: '实在没有了',
    }
  },
  computed: {
    currentFilterValue() {
      return this.filterList[this.currentFilterIndex].value
    }
  },
  onLoad(options) {
    if (options.productId) {
      this.productId = options.productId
      if (options.tag) {
        this.tagFilter = decodeURIComponent(options.tag)
        // Optionally find and set the corresponding filter index if needed
        // Or simply pass the tag to the API
      }
      this.loadReviews()
    } else {
      uni.showToast({ title: '缺少商品ID', icon: 'error' })
      uni.navigateBack()
    }
  },
  onReachBottom() {
    this.loadMore()
  },
  methods: {
    handleFilterChange(index) {
      this.currentFilterIndex = index
      this.page = 1
      this.reviewList = []
      this.hasMore = true
      this.loadMoreStatus = 'loadmore'
      this.loadReviews()
    },
    async loadReviews() {
      if (!this.hasMore || this.loadMoreStatus === 'loading') return
      
      this.loadMoreStatus = 'loading'
      
      try {
        const params = {
          page: this.page,
          limit: this.limit,
          filter: this.currentFilterValue
        }
        if (this.tagFilter) {
          params.tag = this.tagFilter
        }
        
        // Assuming an API endpoint /products/{id}/reviews exists
        const res = await this.$api.get(`/products/${this.productId}/reviews`, { params })
        
        if (this.page === 1) {
          this.reviewList = res.data.list
        } else {
          this.reviewList = [...this.reviewList, ...res.data.list]
        }
        
        this.hasMore = res.data.list.length === this.limit
        this.loadMoreStatus = this.hasMore ? 'loadmore' : 'nomore'
        this.page++
      } catch (error) {
        console.error('加载评价列表失败:', error)
        this.loadMoreStatus = 'loadmore' // Reset status on error
      } finally {
         // Ensure loading status is updated even if list is empty
         if (this.reviewList.length === 0 && this.loadMoreStatus === 'loading') {
             this.loadMoreStatus = 'nomore';
         }
      }
    },
    loadMore() {
      this.loadReviews()
    },
    previewImage(images, index) {
      uni.previewImage({
        urls: images,
        current: index
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.review-list-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.filter-tabs {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #ffffff;
}

.review-list {
  padding: 20rpx;
}

.review-item {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .user-avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }

    .user-details {
      flex: 1;
      .user-name {
        font-size: 28rpx;
        color: #333;
        display: block;
        margin-bottom: 4rpx;
      }
    }

    .review-time {
      font-size: 24rpx;
      color: #999;
    }
  }

  .review-content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 16rpx;
    display: block;
  }

  .review-images {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-bottom: 16rpx;

    .review-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
    }
  }

  .review-specs {
    font-size: 24rpx;
    color: #999;
    background-color: #f5f5f5;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    display: inline-block;
  }
}
</style> 